<template>
	<view class="myWithdrawalTypeAdd">
		<u-navbar title="添加账户类型" ></u-navbar>
		<view class="myWithdrawalTypeAdd-content">
			<view class="myWithdrawalTypeAdd-content-li">
				<view class="">
					账户类型
				</view>
				<view class=" myWithdrawalTypeAdd-content-li-r" @click="sendToViewshow=true">
					<text style="color: #666;" v-if="sendToViewinfo=='请选择'">{{sendToViewinfo}}</text>
					<text v-else>{{sendToViewinfo.SETTB206CA01||''}}</text>
					<text class="iconfont iconxiangxia"></text>
				</view>
			</view>
			<view class="myWithdrawalTypeAdd-content-li">
				<view class="">
					账号
				</view>
				<view class="">
					<input type="number" v-model="accountCode"  placeholder="请输入" maxlength="30"/>
				</view>
			</view>
			<view class="myWithdrawalTypeAdd-content-li-info">
				提示:支付宝输入支付宝账号，微信输入微信号，银行卡输入银行卡号
			</view>
			<view class="myWithdrawalTypeAdd-content-li">
				<view class="">
					收款人
				</view>
				<view class="">
					<input type="text" v-model="name" placeholder="请输入" maxlength="20" />
				</view>
			</view>
			<view class="myWithdrawalTypeAdd-content-btn">
				<button @click="resultTap">重置</button>
				<button @click="submitTap">保存</button>
			</view>
		</view>
		<u-picker mode="selector" v-model="sendToViewshow" @confirm="sendToViewconfirm" range-key="SETTB206CA01" :default-selector="[0]" :range="sendToViewList"></u-picker>
		<u-modal v-model="childShow"  :show-cancel-button="true" title="确认账号信息" @confirm="childConfirm">
			<view class="slot-content">
				<view class="slot-content-li">
					<text>账户类型:</text>{{sendToViewinfo.SETTB206CA01||''}}
				</view>
				<view class="slot-content-li">
					<text>账号:</text>{{accountCode||''}}
				</view>
				<view class="slot-content-li">
					<text>收款人:</text>{{name||''}}
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return {
				userinfo:JSON.parse(uni.getStorageSync('userinfo')),
				name:'',
				accountCode:'',
				sendToViewshow:false,
				sendToViewList:[],
				sendToViewinfo:'请选择',
				childShow:false,
			}
		},
		onShow:function(){
			this.querTypeCode()
		},
		methods:{
			resultTap(){
				this.sendToViewinfo='请选择'
				this.accountCode=''
				this.name=''
			},
			sendToViewconfirm(e){
				this.sendToViewinfo=this.sendToViewList[e]
			},
			submitTap(){
				if(this.sendToViewinfo=='请选择'){
					uni.showToast({
						title: "请选择账户类型",
						duration: 5000,
						icon: 'none',
					});
					return 
				} 
				if(this.accountCode.trim().length==0){
					uni.showToast({
						title: "请输入账号",
						duration: 5000,
						icon: 'none',
					});
					return 
				}
				if(this.name.trim()===''){
					uni.showToast({
						title: "请输入收款人",
						duration: 5000,
						icon: 'none',
					});
					return 
				} 
				this.childShow=true
			},
			querTypeCode(){
				this.sendToViewList=[]
				uni.showLoading({
				    title: '加载中...',
					mask:true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb421/AccountType', 
					method: 'GET',
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.sendToViewList=res.data.data
						}else{
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon:false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon:false
						})
					}
				});
			},
			childConfirm(){
				uni.showLoading({
				    title: '加载中...',
					mask:true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb421/insertSettb406', 
					method: 'POST',
					dataType: 'json',
					data: {
						SETTB406CA00:this.userinfo.ORMTB410ID,//客户ORMTB410ID
						SETTB406CA01:this.sendToViewinfo.SETTB206CA00,//账户类型代码(SETTB206CA00)
						SETTB406CA02:this.sendToViewinfo.SETTB206CA01,//账户类型名称(SETTB206CA01)
						SETTB406CA03:this.accountCode,//账号
						SETTB406CA04:this.name,//账户人姓名
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: '绑定成功',
								type: 'default',
								icon:false
							})
							uni.navigateBack({
								delta:1
							})
						}else{
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon:false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon:false
						})
					}
				});
			},
			
		}
	}
</script>

<style scoped>
	.myWithdrawalTypeAdd{
		width: 100vw;
		min-height: 100vh;
		background-color: #FFF;
	}
	.slot-content{
		padding: 20rpx 30rpx 20rpx 0;
		font-size: 32rpx;
		color: #333;
	}
	.slot-content-li{
		height: 50rpx;
		line-height: 50rpx;
	}
	.slot-content-li text{
		display: inline-block;
		width: 200rpx;
		text-align: right;
	}
	.myWithdrawalTypeAdd-content-li-info{
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #999;
	}
	.myWithdrawalTypeAdd-content{
		background-color: #FFF;
		padding: 50rpx 40rpx;
		color: #333;
		font-size: 32rpx;
	}
	.myWithdrawalTypeAdd-content-li{
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		border-bottom: 2rpx solid #e3e3e3;
		padding: 30rpx 0 5rpx 0;
	}
	.myWithdrawalTypeAdd-content-li view:first-child{
		flex: .4;
	}
	.myWithdrawalTypeAdd-content-li view:last-child{
		flex: 1;
		padding: 0 20rpx 0 40rpx;
		text-align: right;
	}
	.myWithdrawalTypeAdd-content-li input{
		height: 60rpx;
		line-height: 60rpx;
	}
	.myWithdrawalTypeAdd-content-li-r>text:first-child{
		margin-right: 10rpx;
	}
	.myWithdrawalTypeAdd-content-btn{
		display: flex;
		justify-content: space-around;
		margin-top: 100rpx;
	}
	.myWithdrawalTypeAdd-content-btn button{
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		background-color: #ff976a;
		color: #FFF;
	}
	.myWithdrawalTypeAdd-content-btn button+button{
		background-color: #1989fa;
	}
</style>
